<style lang="less" scoped>
.detail-page {
    margin-left: 0px;
    .detail-page-btns {
        margin-bottom: 24px;
        .btn {
            margin-right: 10px;
        }
    }
}
</style>
<script>
const OperBtnKeyEnum = {
    PROCESS_PROGRESS: "PROCESS_PROGRESS",
    EXPORT_EXCEL: "EXPORT_EXCEL",
    /** 打印 */
    PRINTER: "PRINTER",
    /** 申请通过 */
    PASSED: "PASSED",
    /** 申请驳回 */
    REBUT: "REBUT",
    /** 撤销 */
    REVOKE: "REVOKE",
    /** 重新申请 */
    AGAIN:"AGAIN",
    /** 销假 */
    APPLY_LEAVE_CANCELLATION:"APPLY_LEAVE_CANCELLATION"
}

export default {
    name: 'DetailPage',
    OperBtnKeyEnum,
    props: {
        title: {
            type: String,
            default: () => '详情'
        },
        okText: {
            type: String,
            default: () => '确定'
        },
        /**
         * 操作按钮:
         * key|{ key: OperBtnKeyEnum.PROCESS_PROGRESS, name: "", customRender: "" }
         */
        operBtns: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading: false,
            btnSize: "default"
        }
    },
    render() {
        const { title, btnSize, handleOk,operBtns } = this;
        // 底部按钮
        const btns = [];
        const hasOk = this.$listeners.ok && this.okText ? true : false;
        // btns.push(<a-button style={{ marginRight: '8px' }} onClick={() => this.$emit('cancel')}>{hasOk ? '取消' : '关闭'}</a-button>);
        if (hasOk) {
            btns.push(<a-button type="primary" onClick={handleOk}>{this.okText}</a-button>)
        }
        const vOperBtns = this.renderBtns();
        return (
            <div class="detail-page">
                <a-card title={title} bordered={false} bodyStyle={{ margin: '-14px' }}>
                    <div class="detail-page-btns">
                        {vOperBtns}
                    </div>
                    {Object.keys(this.$slots).filter(name=>name!='footer').map(name => (this.$slots[name]))}
                    <div style="margin-top:24px;text-align: center;">
                        { this.$slots.footer || btns}
                    </div>
                </a-card>
            </div>
        )
    },
    methods: {
        handleOk() {
            // 在传输中则阻止 ok 事件触发
            if (this.loading) return;
            this.$emit('ok');
        },
        handleBtnsClick(item){
            this.$emit('operBtnClick',item);
        },
        renderBtns(){
            const {  btnSize, handleOk,operBtns,handleBtnsClick } = this;
            return operBtns.map(i=>{
                if (typeof i=="string") {
                    if (i === OperBtnKeyEnum.PROCESS_PROGRESS) {
                        return (<a-button class="btn" type="primary" icon="share-alt" size={btnSize} onClick={()=>handleBtnsClick(i)}>流程进度</a-button>)
                    }
                    if (i === OperBtnKeyEnum.EXPORT_EXCEL) {
                        return (<a-button class="btn" type="primary" icon="file-excel" size={btnSize} onClick={()=>handleBtnsClick(i)}>导出Excel</a-button>)
                    }

                    if (i === OperBtnKeyEnum.PASSED) {
                        return (<a-button class="btn" type="primary" icon="check" size={btnSize} onClick={()=>handleBtnsClick(i)}>申请通过</a-button>)
                    }

                    if (i === OperBtnKeyEnum.REBUT) {
                        return (<a-button class="btn" type="danger" icon="close-circle" size={btnSize} onClick={()=>handleBtnsClick(i)}>申请驳回</a-button>)
                    }
                    if (i === OperBtnKeyEnum.PRINTER) {
                        return (<a-button class="btn" type="primary" icon="printer" size={btnSize} onClick={()=>handleBtnsClick(i)}>打印</a-button>)
                    }

                    if(i === OperBtnKeyEnum.REVOKE){
                        return (<a-button class="btn" type="danger" icon="close-circle" size={btnSize} onClick={()=>handleBtnsClick(i)}>撤销申请</a-button>)
                    }

                    if(i === OperBtnKeyEnum.AGAIN){
                        return (<a-button class="btn" type="primary" icon="file-sync" size={btnSize} onClick={()=>handleBtnsClick(i)}>重新申请</a-button>)
                    }

                    if(i === OperBtnKeyEnum.APPLY_LEAVE_CANCELLATION){
                        return (<a-button class="btn" type="primary" icon="clock-circle" size={btnSize} onClick={()=>handleBtnsClick(i)}>申请销假</a-button>)
                    }
                }
                if (!i.customRender) {
                    throw Error("自定义按钮请传入的customRender字段")
                }
                if (typeof i.customRender=="function") {
                    return i.customRender();
                }
                return i.customRender;
            });
        }
    }
}
</script>